import { ColumnProps } from 'antd/lib/table';
import _ from 'lodash';
import { StateType, toUserType } from '../utils';
import { toTime, getElliStyleElement } from '@/utils/tools';
import { DEVICE_TYPE, ERROR_STATUS } from '../data';

// 操作端
function toOsType(val: number) {
  const obj = _.find(DEVICE_TYPE, item => item.value === val);
  return obj ? obj.title : '';
}

// 异常状态
function toErrStatus(val: number) {
  const obj = _.find(ERROR_STATUS, item => item.value === val.toString());
  return obj ? obj.text : '';
}

export function getAbnormalColumns(self: any) {
  const { userType, errorStatus } = self.state.tableFilters;
  const userTypeData = userType ? [userType] : ['-1'];
  const errorStatusData = errorStatus ? [errorStatus] : ['-1'];

  // const elliStyle: CSSProperties = {
  //   overflow: 'hidden',
  //   textOverflow: 'ellipsis',
  //   whiteSpace: 'nowrap',
  //   margin: 'auto',
  // };

  const columns: ColumnProps<StateType>[] = [
    // 充值时间
    {
      title: '充值时间',
      dataIndex: 'rechargeDate',
      key: 'rechargeDate',
      width: '10%',
      render: text => toTime(text),
    },
    // 账户名
    {
      title: '账户名',
      dataIndex: 'username',
      key: 'username',
      width: '10%',
    },
    // 账户类型
    {
      title: '账户类型',
      dataIndex: 'userType',
      key: 'userType',
      render: text => toUserType(text),
      filters: [
        { text: '全部', value: '-1' },
        { text: '会员', value: '0' },
        { text: '代理', value: '1' },
      ],
      filteredValue: userTypeData,
      filterMultiple: false,
      width: '10%',
    },
    // 充值商户
    {
      title: '充值商户',
      dataIndex: 'channelName',
      key: 'channelName',
      width: '10%',
    },
    // 商户ID
    {
      title: '商户ID',
      dataIndex: 'merchantCode',
      key: 'merchantCode',
      width: '20%',
      render: text => getElliStyleElement(text, 20, true),
      // render: text => (
      //   <Tooltip title={text}>
      //     <div style={elliStyle}>{text}</div>
      //   </Tooltip>
      // ),
    },
    // 操作端
    {
      title: '操作端',
      dataIndex: 'osType',
      key: 'osType',
      render: text => toOsType(text),
      width: '10%',
    },
    // 异常状态
    {
      title: '异常状态',
      dataIndex: 'errorStatus',
      key: 'errorStatus',
      render: text => toErrStatus(text),
      filters: ERROR_STATUS,
      filteredValue: errorStatusData,
      filterMultiple: false,
      width: '10%',
    },
    // 异常状态
    {
      title: '异常原因',
      dataIndex: 'errorMsg',
      key: 'errorMsg',
      width: '20%',
      render: text => getElliStyleElement(text, 18, true),
    },
  ];
  return columns;
}
